<template>
  <div class="drop">
    <label :for="name">{{ title }}</label>
    <select :name="name" :id="id">
      <option v-for="(item, index) in data" :key="index" :value="item.value">
        {{ item.label }}
      </option>
    </select>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, type PropType } from 'vue';
import { propTypes } from '@/utils/propTypes';

interface DropdownType {
  value: string;
  label: string;
}

defineProps({
  title: propTypes.string.def(''),
  id: propTypes.string.def(''),
  name: propTypes.string.def(''),
  data: {
    type: Array as PropType<DropdownType[]>,
    required: true,
    validator: (val: any[]) => val.length > 0,
    default: () => []
  }
});

onMounted(() => {});
</script>
<style lang="scss" scoped>
.drop {
  display: flex;
  label {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    line-height: 30px;
    height: 30px;
    margin-right: 15px;
  }
  select {
    height: 30px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    padding: 0 16px;
  }
}
</style>
